<template>
  <page-header-wrapper
    :tab-list="tabList"
    :tab-active-key="tabActiveKey"
    :tab-change="handleTabChangeOne"
  >
    <template v-slot:content>
    </template>
    <router-view :searchData="searchData"></router-view>
  </page-header-wrapper>
</template>
<script>
import article from './Article'
import { searchSoilByName } from '@/api/soil'
const getActiveKey = (path) => {
  switch (path) {
    case '/list/search/article':
      return '1'
    case '/list/search/project':
      return '2'
    case '/list/search/application':
      return '3'
    default:
      return '1'
  }
}
export default {
  name: 'SearchLayout',
  components: {
    article
  },
  data () {
    return {
      searchData: '',
      value: '',
      tabList: [
        { key: '1', tab: '某地区土壤百科' },
       /* { key: '2', tab: '项目' },*/
        { key: '3', tab: '土地知识问答' }
      ],
      tabActiveKey: '1',
      search: true
    }
  },
  created () {
    this.tabActiveKey = getActiveKey(this.$route.path)

    this.$watch('$route', (val) => {
      this.tabActiveKey = getActiveKey(val.path)
    })
  },
  methods: {
    searchSoilByName () {
      const name = {
        soilName: this.value
      }
      searchSoilByName(name).then((res) => {
        console.log(res.data)
        this.searchData = res.data
      })
      }
    },
    handleTabChangeOne (key) {
      this.tabActiveKey = key
      switch (key) {
        case '1':
          this.$router.push('/list/search/article')
          break
        case '2':
          this.$router.push('/list/search/project')
          break
        case '3':
          this.$router.push('/list/search/application')
          break
        default:
          this.$router.push('/workplace')
      }
    }
  }
</script>

<style lang="less" scoped>
.ant-pro-page-header-search {
  text-align: center;
  margin-bottom: 16px;
}
</style>
